<template>
  <view class="iphone-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <navigator url="/pages/views/login" class="nav-back">
        <view class="back-arrow"></view>
      </navigator>
      <view class="nav-title">找回密码</view>
    </view>

    <!-- Logo -->
    <view class="logo-container">
      <view class="logo">
        <view class="logo-icon">
          <view class="logo-line"></view>
          <view class="logo-line"></view>
          <view class="logo-line"></view>
        </view>
      </view>
      <view class="logo-text">传奇IM</view>
    </view>

    <!-- 步骤条 -->
    <view class="step-indicator">
      <view class="step" :class="{ active: step === 1 }">
        <view class="step-number">1</view>
        <view class="step-text">验证身份</view>
        <view class="step-line"></view>
      </view>
      <view class="step" :class="{ active: step === 2 }">
        <view class="step-number">2</view>
        <view class="step-text">重置密码</view>
        <view class="step-line"></view>
      </view>
      <view class="step" :class="{ active: step === 3 }">
        <view class="step-number">3</view>
        <view class="step-text">完成</view>
      </view>
    </view>

    <!-- 步骤内容 -->
    <view class="form-container">
      <!-- 步骤一：验证身份 -->
      <template v-if="step === 1">
        <view class="input-group">
          <input class="input-field" v-model="phone" type="tel" placeholder="请输入注册手机号" />
        </view>
        <view class="input-group verification-group">
          <view class="verification-input">
            <input class="input-field" v-model="code" type="text" placeholder="请输入验证码" />
          </view>
          <button class="verification-btn" :disabled="countdown > 0" @click="getCode">
            {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
          </button>
        </view>
        <view class="info-text">验证码将发送至您的手机，请注意查收</view>
        <button class="submit-btn" @click="nextStep">下一步</button>
      </template>

      <!-- 步骤二：重置密码 -->
      <template v-else-if="step === 2">
        <view class="input-group">
          <input class="input-field" v-model="newPassword" type="password" placeholder="请输入新密码" />
        </view>
        <view class="input-group">
          <input class="input-field" v-model="confirmPassword" type="password" placeholder="请再次输入新密码" />
        </view>
        <button class="submit-btn" @click="resetPassword">确认重置</button>
      </template>

      <!-- 步骤三：完成提示 -->
      <template v-else-if="step === 3">
        <view style="text-align: center; margin-top: 50px;">
          <view style="font-size: 18px; color: #186ef2; margin-bottom: 10px;">密码重置成功！</view>
          <view style="color: #999; font-size: 14px;">请使用新密码登录</view>
          <button class="submit-btn" style="margin-top: 40px;" @click="toLogin">返回登录</button>
        </view>
      </template>
    </view>

    <view class="help-link-container">
      遇到问题？<text class="help-link">联系客服</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(1)
const phone = ref('')
const code = ref('')
const countdown = ref(0)
const newPassword = ref('')
const confirmPassword = ref('')
let timer = null

// 获取验证码
const getCode = async () => {
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }

  const res = await uni.$http('/home/login/forgot_captcha', 'post', { phone: phone.value })
  if (res.data.code === 200) {
    uni.showToast({ title: '验证码已发送', icon: 'success' })
    countdown.value = 60
    timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) clearInterval(timer)
    }, 1000)
  } else {
    uni.showToast({ title: res.data.msg, icon: 'none' })
  }
}

// 步骤一 -> 步骤二
const nextStep = async () => {
  if (!phone.value || !code.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }

  const res = await uni.$http('/home/login/check_captcha', 'post', {
    phone: phone.value,
    code: code.value
  })

  if (res.data.code === 200) {
    step.value = 2
  } else {
    uni.showToast({ title: res.data.msg, icon: 'none' })
  }
}

// 步骤二 -> 步骤三
const resetPassword = async () => {
  if (!newPassword.value || !confirmPassword.value) {
    uni.showToast({ title: '请填写新密码', icon: 'none' })
    return
  }

  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({ title: '两次密码不一致', icon: 'none' })
    return
  }

  const res = await uni.$http('/home/login/reset_password', 'post', {
    phone: phone.value,
    password: newPassword.value
  })

  if (res.data.code === 200) {
    step.value = 3
  } else {
    uni.showToast({ title: res.data.msg, icon: 'none' })
  }
}

// 返回登录
const toLogin = () => {
  uni.redirectTo({ url: '/pages/views/login' })
}
</script>

<style scoped>
.iphone-container {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 顶部导航 */
.nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 0;
  margin-bottom: 15px;
}

.nav-back {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 16px;
  color: #333;
  padding-left: 10px;
}

.back-arrow {
  width: 10px;
  height: 10px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  margin-right: 6px;
  margin-top: 1px;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
}

/* logo 样式 */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.logo {
  width: 60px;
  height: 60px;
  background-color: #186ef2;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-line {
  width: 30px;
  height: 4px;
  background-color: #fff;
  border-radius: 2px;
  margin: 3px 0;
}

.logo-text {
  font-size: 16px;
  color: #333;
  margin-top: 8px;
}

/* 步骤条 */
.step-indicator {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
}

.step.active .step-number {
  background-color: #186ef2;
}

.step-text {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.step.active .step-text {
  color: #186ef2;
}

.step-line {
  position: absolute;
  right: -50%;
  top: 12px;
  height: 2px;
  width: 100%;
  background-color: #ccc;
  z-index: -1;
}

.step:last-child .step-line {
  display: none;
}

/* 表单容器 */
.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

/* 输入框样式 */
.input-group {
  margin-bottom: 15px;
}

.input-field {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

/* 验证码区域 */
.verification-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verification-input {
  flex: 1;
}

.verification-btn {
  margin-left: 10px;
  padding: 0 12px;
  height: 40px;
  background-color: #186ef2;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
}

.verification-btn:disabled {
  background-color: #ccc;
}

/* 提交按钮 */
.submit-btn {
  margin-top: 20px;
  width: 100%;
  height: 44px;
  background-color: #186ef2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}

/* 提示文字 */
.info-text {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* 帮助链接 */
.help-link-container {
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: #666;
}

.help-link {
  color: #186ef2;
  margin-left: 4px;
}

</style>
